<template>
  <div class="history-container">
    <h2 class="history-title">文档浏览</h2>
    <div v-if="historyList.length === 0" class="empty-tip">
      暂无文档记录
    </div>
    <ul v-else class="history-list">
      <li v-for="item in historyList" :key="item.id" class="history-item doc-card">
        <div class="doc-title">{{ item.title || '未命名文档' }}</div>
        <div class="doc-desc">{{ item.description || '暂无简介' }}</div>
        <div class="doc-tags">
          <span v-for="tag in (item.tags ? item.tags.split(',') : [])" :key="tag" class="doc-tag">{{ tag }}</span>
        </div>
        <div class="doc-meta">
          <span class="doc-type">{{ item.fileType || '' }}</span>
          <span class="doc-author">{{ item.userName || '未知用户' }}</span>
        </div>
        <div class="doc-meta2">
          <span class="doc-time">{{ (item.createdAt || '').replace('T', ' ').replace('Z', '') }}</span>
          <span class="doc-size">{{ item.fileSize || '' }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { API_BASE_URL } from '@/utils/api-base.js'

export default {
  data() {
    return {
      historyList: []
    }
  },
  onShow() {
    this.loadHistory()
  },
  methods: {
    loadHistory() {
      const token = uni.getStorageSync('token');
      uni.request({
        url: `${API_BASE_URL}/api/documents`,
        method: 'get',
        header: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        success: (res) => {
          console.log(res.data);
          this.historyList =res.data.documents
        },
        fail: () => {
          this.historyList = []
        }
      })
    }
  }
}
</script>

<style scoped>
.history-container {
  padding: 24rpx 20rpx;
  background: #f7f8fa;
  min-height: 100vh;
}
.history-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #333;
}
.empty-tip {
  color: #aaa;
  font-size: 28rpx;
  text-align: center;
  margin-top: 80rpx;
}
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.history-item {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  margin-bottom: 18rpx;
  padding: 22rpx 18rpx;
  display: flex;
  flex-direction: column;
}
.doc-card {
  border: 1px solid #e0e0e0;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  border-radius: 14rpx;
  padding: 22rpx 18rpx 14rpx 18rpx;
  margin-bottom: 18rpx;
  background: #fff;
}
.doc-title {
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 6rpx;
  word-break: break-all;
}
.doc-desc {
  font-size: 26rpx;
  color: #555;
  margin-bottom: 8rpx;
  word-break: break-all;
}
.doc-tags {
  margin-bottom: 8rpx;
}
.doc-tag {
  display: inline-block;
  background: #e6f7ff;
  color: #1890ff;
  font-size: 22rpx;
  border-radius: 6rpx;
  padding: 2rpx 10rpx;
  margin-right: 8rpx;
}
.doc-meta, .doc-meta2 {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999;
  margin-bottom: 2rpx;
}
.doc-type {
  color: #b37feb;
}
.doc-author {
  color: #52c41a;
}
.doc-time {
  color: #999;
}
.doc-size {
  color: #aaa;
}
</style>